<template>
    <div class="container">
        <div class="handle-box">
                <el-form ref="form" :model="form" label-width="90px" class="flex">
                    <!-- <el-form-item label="所属街道：">
                        <el-input v-model="name" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="所属社区：">
                        <el-input v-model="name" placeholder="请输入名称" class="handle-input mr10"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="小区：">
                        <el-cascader
                            v-model="villageno"
                            :options="options"
                            :show-all-levels="false"
                            ></el-cascader> 
                    </el-form-item>  -->
                    <el-form-item label="学校：" class="wid33">
                    <el-select
                        v-model="villageno"
                        placeholder="请选择学校"
                        @change="changeStreet"
                    >
                        <el-option
                            v-for="item in clientNameOpts"
                            :key="item.REGION_ID"
                            :label="item.REGION_NAME"
                            :value="item.REGION_ID"
                        ></el-option>
                    </el-select>
                </el-form-item>
                    <el-form-item label="学生姓名：">
                        <el-input v-model="name" placeholder="请输入名称"></el-input>
                        <!-- <el-cascader v-model="VILLAGE_ID" :options="options" :show-all-levels="false" clearable="true" @change="getdata()"></el-cascader> -->
                    </el-form-item>
                    <!-- <el-form-item label="日期范围：">
                       <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="getdata()">搜索</el-button>
                        <!-- <el-button type="success" icon="el-icon-circle-plus-outline" @click="addvialog()">新增</el-button> -->
                    </el-form-item>
                    
                </el-form>
            </div>
            <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            >
                <!-- <el-table-column prop="VID" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="STREET_NAME" label="所属街道"></el-table-column>
                <el-table-column prop="COMMUNITY_NAME" label="所属社区"></el-table-column> -->
                <el-table-column prop="VILLAGE_NAME" label="学校"></el-table-column>
                <el-table-column prop="NAME" label="姓名"></el-table-column>
                <el-table-column prop="TotalPoints" label="累计积分">
                    <template scope="scope">
                        <div class="u" @click="getMore(scope.row)">{{ scope.row.TotalPoints }}</div>
                    </template>
                </el-table-column>
                <el-table-column  label="消费积分">
                    <template scope="scope">
                        <div class="u" @click="getscoreMore(scope.row)">{{ scope.row.ConsumePoints }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="SurplusPoints" label="剩余积分"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage"  
                    :page-size="pageSize"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <!-- 详情弹出框 -->
              <el-dialog v-dialogDrag title="基础信息" :visible.sync="editVisible" width="50%" >
                <el-form ref="form" :model="form" label-width="70px" class="diaglos display scroll" style="heigh:400px">
                    <el-form-item label="所属街道：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="form.address" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="所属社区：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="form.community" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="所属小区：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="plot" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="居民姓名：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="plotname" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="可回收垃圾累计积分：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="form.integral" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="厨余垃圾累计积分：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="form.chuyuintegral" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="有害垃圾累计积分：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="form.youhaiintegral" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                    <el-form-item label="其他垃圾累计积分：" :label-width="formLabelWidth" class="wid50">
                        <input v-model="form.qitaintegral" class="inputstyle" type="text" disabled="disabled"></input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </el-dialog>
    

            <!-- 积分明细弹出框 -->
            <el-dialog title="积分明细" :visible.sync="detaildialog" width="30%" >
                <!-- <div class='time-line' style="height:300px;overflow-y: scroll">
	            <div v-for='item in testList' class='time-line-div'>
            		<p>{{item.time}}</p>
            		<p ref='circular'></p>
            		<p>{{item.text}}</p>
	            </div>
	            <div class='img-dotted' ref='dotted'></div>
                </div> -->
                <div class="block scrolly" style="height:300px;">
                    <el-timeline >
                      <el-timeline-item 
                        v-for="(activity,index) in avtives"
                        :key='index'
                        :size='activity.size'
                        :color='activity.color'
                        :timestamp="activity.data" 
                        placement="top"
                        >
                        <el-card style="border:2px solid #cecece">
                          <h4>{{activity.content}}</h4>
                          <p>{{activity.name}} 提交于 {{activity.timestamp}}</p>
                        </el-card>
                      </el-timeline-item>
                    </el-timeline>
                </div>
                 <span slot="footer" class="dialog-footer">
                    <el-button @click="detaildialog = false">取 消</el-button>
                    <!-- <el-button type="primary" @click="saveEdit">确 定</el-button> -->
                </span>
            </el-dialog>
                <!-- 累计积分明细 -->
             <el-dialog v-dialogDrag title="累计积分明细" :visible.sync="getmoredialog" width="50%" >
                    <el-table
                        :data="integraldata"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column prop="Recyclable" label="可回收垃圾积分">
                    <template scope="scope">
                        <div class="u" @click="getMoreSub(scope.row)">{{ scope.row.Recyclable }}</div>
                    </template>
                </el-table-column>
                        <el-table-column
                          prop="Recyclable"
                          label="可回收垃圾积分">
                        </el-table-column>
                        <el-table-column
                          prop="Kitchen"
                          label="厨余垃圾积分">
                        </el-table-column>
                        <el-table-column
                          prop="Harmful"
                          label="有害垃圾积分">
                        </el-table-column>
                        <el-table-column
                          prop="Other"
                          label="其他垃圾积分">
                        </el-table-column>
                        <el-table-column
                          prop="UpdateTime"
                          label="记录时间">
                        </el-table-column>
                    </el-table>
            </el-dialog>
            <!-- 累计积分详细明细 -->
             <el-dialog v-dialogDrag title="详细明细" :visible.sync="getmoreSubdialog" width="50%" >
                    <el-table
                        :data="subIntegral"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          prop="RUBBISH_NAME"
                          label="类型">
                        </el-table-column>
                        <el-table-column
                          prop="Recyclable"
                          label="积分">
                        </el-table-column>
                        <el-table-column
                          prop="UpdateTime"
                          label="记录时间">
                        </el-table-column>
                    </el-table>
            </el-dialog>
            <!-- 消费积分明细 -->
             <el-dialog v-dialogDrag title="消费积分明细" :visible.sync="getscoremoredialog" width="55%" >
                 <el-table
                        :data="xfintegraldata"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          prop="EX_NAME"
                          label="兑换物品"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="EX_COUNT"
                          label="兑换个数">
                        </el-table-column>
                        <el-table-column
                          prop="EX_POINTS"
                          label="兑换积分"
                          width="180">
                        </el-table-column>
                        <el-table-column
                            prop="EXCHANGETIME"
                            label="兑换时间"
                            width="180">
                            <template scope="scope">
                                {{ $moment(scope.row.EXCHANGETIME).format('YYYY-MM-DD HH:mm:ss') }}
                            </template>
                        </el-table-column>
                        
                        <!-- <el-table-column
                          prop="youhaiintegral"
                          label="有害垃圾积分">
                        </el-table-column>
                        <el-table-column
                          prop="qitaintegral"
                          label="其他垃圾积分">
                        </el-table-column> -->
                    </el-table>
            </el-dialog>
            <!-- 新增弹出框 -->
             <el-dialog v-dialogDrag title="新增" :visible.sync="adddatevialog" width="50%" >
                 <el-form ref="addform" :model="addform" label-width="70px" class="diaglos display">
                    <el-form-item label="居民名称：" :label-width="formLabelWidth" class="wid50">
                        <el-input v-model="addform.address" ></el-input>
                    </el-form-item>
                    <el-form-item label="居民累计积分：" :label-width="formLabelWidth" class="wid50">
                        <el-input v-model="addform.totalintegral"></el-input>
                    </el-form-item>
                    <el-form-item label="居民消费积分：" :label-width="formLabelWidth" class="wid50">
                        <el-input v-model="addform.totalscore"></el-input>
                    </el-form-item>
                    <el-form-item label="居民剩余积分：" :label-width="formLabelWidth" class="wid50">
                        <el-input v-model="addform.totalremaining"></el-input>
                    </el-form-item> 
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="adddatevialog = false">取 消</el-button>
                    <el-button type="primary" @click="saveEditvialog">确 定</el-button>
                </span>
            </el-dialog>
        </div>
</template>
<script>
import '../../../assets/css/common.css'

export default {
  data () {
    return {
      clientNameOpts: [{"REGION_ID":"001","REGION_NAME":"天津市第一中学滨海学校"},
      {"REGION_ID":"002","REGION_NAME":"天津钢管公司中学"},
      {"REGION_ID":"003","REGION_NAME":"东丽职教中心学校(东丽湖新校区)"}],
      getmoreSubdialog: false,
      subIntegral: [],
      avtives: [],
      integraldata: [],
      xfintegraldata: [],
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      userList: [],
      address: '',
      name: '',
      value1: '',
      VILLAGE_ID: [],
      formLabelWidth: '160px',
      plot: '小区2',
      plotname: '张三',
      tableData: [{
        VID: '1',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '紫金里社区',
        VILLAGE_NAME: '紫金北里',
        NAME: '张倩',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '2',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '紫金里社区',
        VILLAGE_NAME: '紫金南里',
        NAME: '马军娟',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '3',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖南里社区',
        VILLAGE_NAME: '环湖南里',
        NAME: '孙贝',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '4',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖南里社区',
        VILLAGE_NAME: '环湖西里',
        NAME: '牛海棠',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '5',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖南里社区',
        VILLAGE_NAME: '蔚蓝轩',
        NAME: '张莲花',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '6',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖南里社区',
        VILLAGE_NAME: '梧桐大厦',
        NAME: '孙奎',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '7',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖南里社区',
        VILLAGE_NAME: '环湖里',
        NAME: '张航',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '8',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖东里社区',
        VILLAGE_NAME: '环湖东里',
        NAME: '孙贝',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '9',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '环湖东里社区',
        VILLAGE_NAME: '华昌大厦',
        NAME: '李刚',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }, {
        VID: '10',
        STREET_NAME: '天塔街道',
        COMMUNITY_NAME: '育贤里社区',
        VILLAGE_NAME: '育贤里',
        NAME: '南贝贝',
        TotalPoints: '500',
        ConsumePoints: '358',
        SurplusPoints: '142'
      }],
      multipleSelection: [],
      originalData: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      options: [],
      villageno: '',
      detaildialog: false,
      adddatevialog: false,
      communitydetail: [],
      communitydetaildata: '',
      getmoredialog: false,
      getscoremoredialog: false,
      addform: {
        address: '',
        totalintegral: '',
        totalscore: '',
        totalremaining: ''
      },
    }
  },
  created () {
    this.getdata();
    this.loadCheckbox_SCV()
  },
  methods: {
    getdata () {
      // const { data } =await this.$axios.get(this.$iurl+'/GetResidentIntegralListApi')
      this.$axios({
        url: this.$iurl + '/GetResidentIntegralListApi?ClientNo',
        method: 'get',
      }).then(res => {
        this.originalData = Object.assign([], res.data)
        for (let index = 0; index < this.originalData.length; index++) {
          const element = this.originalData[index];
          if (index < 4) {
            element.VILLAGE_NAME = '天津市第一中学滨海学校'
          }else if (index < 6) {
element.VILLAGE_NAME = '东丽职教中心学校'
          }else {
element.VILLAGE_NAME = '天津钢管公司中学'
          }
        }
      
        this.mohu()
      })
    },
    // 模糊搜索
    mohu () {
      this.tableData = this.originalData

      if (this.VILLAGE_ID[2]) this.tableData = this.tableData.filter(item => item.VILLAGE_ID == this.VILLAGE_ID[2])
      if (this.name) this.tableData = this.tableData.filter(item => item.NAME.includes(this.name))

    },
    async saveEditvialog () {
      this.adddatevialog = false
    },
    //新增弹出框
    async addvialog () {
      this.adddatevialog = true
    },
    getMoreSub (row) {
      console.log(row)
      this.subIntegral = [{"Recyclable":row.Recyclable,"UpdateTime":row.UpdateTime,"RUBBISH_NAME":row.RUBBISH_NAME}]
      this.getmoreSubdialog = true
    },
    //累计积分弹框
    async getMore (row) {
      this.$axios({
        url: this.$iurl + '/GetResidentCumulativeIntegralDetailApi',
        method: 'get',
        params: {
          VID: row.VID
        }
      }).then(item => {
        if (item.status == 200) {
          this.integraldata = Object.assign([], item.data)
        }
      })
      this.getmoredialog = true
      console.log(row);
    },
    //消费积分弹框
    async getscoreMore (row) {
      this.$axios({
        url: `${this.$iurl}/GetResidentConsumptionPointsDetailApi?VID=${row.VID}`,
        method: 'get'
      }).then(item => {
        if (item.status == 200) {
          this.xfintegraldata = Object.assign([], item.data)
        }
      })
      this.getscoremoredialog = true
      console.log(row);
    },
    async loadCheckbox_SCV () {
      var url = this.$url + '/GetGroupsApi?ClientNo=' + localStorage.getItem('clentno');
      const { data } = await this.$axios.get(url)
      this.options = data.filter(item => {
        return item
      })
    },
    async detail () {
      this.detaildialog = true;
    },
    // 编辑操作
    handleEdit (index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit () {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
    }
  },
  mounted () {
    this.$refs.dotted.style.left = this.$refs.circular[0].offsetLeft - 12 + 'px'
  }
}
</script>
<style scoped>
.text-center {
    text-align: center;
}
.time h2 {
    color: #ff6600;
    margin: 20px auto 30px auto;
}
.time-line {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.time-line-div {
    position: relative;
    min-height: 100px;
}
.time-line-div > p:nth-child(1) {
    position: absolute;
    left: 0;
    width: 80px;
    text-align: center;
}
.time-line-div > p:nth-child(2) {
    position: absolute;
    left: 85px;
    width: 15px;
    height: 15px;
    top: 15px;
    background: #5cb85c;
    border-radius: 50%;
    z-index: 10;
}
.time-line-div > p:nth-child(3) {
    position: absolute;
    left: 130px;
    padding: 10px;
    background: #317ef3;
    font-size: 0.8rem;
    color: #fff;
    border-radius: 10px;
}
.img-dotted {
    position: absolute;
    width: 20px;
    height: 2000px;
    top: 0;
    left: 73px;
    z-index: 1;
    background: url('../../../assets/img/dotted.png');
}
</style>